<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增协议</title>
    <link rel="stylesheet" type="text/css" href="../../../../start/layui/css/layui.css"/>
    <script src="../../../../start/layui/layui.js"></script>
    <script src="../../../../start/layui/js/area2.js"></script>
    <script src="../../../../start/layui/js/xcl.js"></script>
    <style>
        .layui-form-select .layui-input {
             padding-right: 0px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form method="post" class="layui-form">
    <div  class="layui-row" style="margin-top: 10px">
        <div class="layui-col-md4">
            <label class="layui-form-label">车主姓名</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline selectTitleDiv" id="search-form0">
                    <input type="tel" name="ownerName"  required   id="textValue0"  autocomplete="off" class="layui-input textValue" style="width: 168px;">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">到达分站</label>
            <div class="layui-input-inline required">
                <select name="substationunit" id="substationUnit">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-inline">
                <label class="layui-form-label"  style="padding-left: 0px;width: 95px">运输一详细地址</label>
                <div class="layui-input-inline">
                    <input type="tel" name="detailedAddress"  required id="detailedAddress" autocomplete="on" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <label class="layui-form-label">发车时间</label>
            <div class="layui-input-inline">
                <input type="text" name="datearrival" id="date" required lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">车辆类型</label>
            <div class="layui-input-inline  required">
                <select name="substationunit" id="vehicleType">
                    <option value="">请选择</option>
                    <option value="百吨王">百吨王</option>
                    <option value="大型汽车">大型汽车</option>
                    <option value="中型汽车">中型汽车</option>
                    <option value="轻型汽车">轻型汽车</option>
                    <option value="微型汽车">微型汽车</option>
                    <option value="低速汽车">低速汽车</option>
                    <option value="三轮车">三轮车</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-inline">
                <label class="layui-form-label"  style="padding-left: 0px;width: 95px">运输二详细地址</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="tel" name="detailedAddress1"  required id="detailedAddress1" autocomplete="on" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <label class="layui-form-label">司机电话</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone"  required id="phone" autocomplete="on" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-inline">
                <label class="layui-form-label"  style="padding-left: 0px;width: 95px">车辆详细地址</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="tel" name="detailedAddress2"  required id="detailedAddress2" autocomplete="on" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">挂车拍照号</label>
            <div class="layui-input-inline">
                <input type="tel" name="trailer"  required id="trailer" autocomplete="on" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-md4">
            <label class="layui-form-label">车辆所有权</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <input type="tel" name="vehicleProperty"  required id="vehicleProperty" autocomplete="on" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">车辆牌照</label>
            <div class="layui-input-inline">
                <input type="tel" name="licenseTag"  required id="licenseTag" autocomplete="on" class="layui-input" >
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">车主身份证</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <input type="tel" name="identityCard"  required id="identityCard" autocomplete="on" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div  class="layui-row" style="margin-top: 10px">
        <div class="layui-col-md4">
            <label class="layui-form-label">车主地址</label>
            <div class="layui-input-inline">
                <input type="tel" name="ownerAddress"  required id="ownerAddress" autocomplete="on" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">最大载重单位吨</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <input type="tel" name="maximumLoad"  required id="maximumLoad" autocomplete="on" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">评价备注</label>
            <div class="layui-input-inline">
                <input type="tel" name="remark"  required id="remark" autocomplete="on" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <label class="layui-form-label">&nbsp;</label>
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
</body>
</html>
<script>
    layui.use(['form', 'layedit', 'laydate','jquery'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var $ = layui.jquery;

        //日期
        laydate.render({
            elem: '#date'
        });
        $.ajax({
            url: "../../../../getAllSubstation",
            type: "post",
            data: {},
            dataType: "json",
            success: function (data) {
                //动态添加下拉框
                for (var i = 0; i < data.length; i++) {
                    $("#substationUnit").append("<option value='" + data[i].subId + "'>" + data[i].subName + "</option>");
                }
                //刷新
                form.render('select');
            }
        })
        //地址
        form.on("select(district2)",function(data){
            //省
            var sheng=$('#province2 option:selected').text();
            //市
            var shi=$('#city2 option:selected').text();
            //区
            $('#detailedAddress2').val(sheng+"-"+shi+"-"+data.value+"-");
        });







        //用于存储查询地址
        var selectAll = ['getOwnerNameByDriver'];
        //用于得到当前需要增加的下拉列表提示下标
        var indexDate = 0;
        $(".selectTitleDiv").each(function (i, z) {
            //查询需要存放的标签值
            $.ajax({
                url: "../../../../"+selectAll[i],
                type: 'post',
                success: function (data) {
                    //当前需要增加的下拉列表下标
                    indexDate = data.index;
                    //增加下拉列表提示
                    $(document).ready(function () {
                        //增加下拉列表提示
                        $("#search-form" + data.index).autocomplete({
                            hints: data.data,
                            width: 300,
                            height: 30
                        });
                    });
                }
            })
        })

        //绑定文本框失焦事件 用于隐藏下拉提示
        $('.textValue').blur(function () {
            //增加延时器防止点击的时候隐藏
            setTimeout(function () {
                $(".proposal-box").css("display", "none")
            }, 200);

        })
        //绑定文本框更改事件 用于显示隐藏的下拉提示
        $('.textValue').keyup(function () {
            //alert($('.textValue').index(this));
            $("#search-form" + $('.textValue').index(this) + " .proposal-box").css("display", "block")
        })
        //用于下拉列表提示
        $.fn.autocomplete = function (params) {
            //Selections
            var currentSelection = -1;
            var currentProposals = [];
            //Default parameters
            params = $.extend({
                hints: [],
                placeholder: 'Search',
                width: 200,
                height: 16,
                showButton: true,
                buttonText: 'Search',
                onSubmit: function (text) {
                },
                onBlur: function () {
                }
            }, params);
            var searchContainer = $("#search-form" + indexDate)
            //Text input
            var input = $("#textValue" + indexDate);
            //Proposals
            var proposals = $('<div style=" z-index:999"></div>')
                .addClass('proposal-box')
                .css('width', 186)
                .css('top', 30);
            var proposalList = $('<ul></ul>')
                .addClass('proposal-list');

            proposals.append(proposalList);

            input.keydown(function (e) {
                switch (e.which) {
                    case 38: // Up arrow
                        e.preventDefault();
                        $('ul.proposal-list li').removeClass('selected');
                        if ((currentSelection - 1) >= 0) {
                            currentSelection--;
                            $("ul.proposal-list li:eq(" + currentSelection + ")")
                                .addClass('selected');
                        } else {
                            currentSelection = -1;
                        }
                        break;
                    case 40: // Down arrow
                        e.preventDefault();
                        if ((currentSelection + 1) < currentProposals.length) {
                            $('ul.proposal-list li').removeClass('selected');
                            currentSelection++;
                            $("ul.proposal-list li:eq(" + currentSelection + ")")
                                .addClass('selected');
                        }
                        break;
                    case 13: // Enter
                        if (currentSelection > -1) {
                            var text = $("ul.proposal-list li:eq(" + currentSelection + ")").html();
                            input.val(text);
                        }
                        currentSelection = -1;
                        proposalList.empty();
                        params.onSubmit(input.val());
                        break;
                    case 27: // Esc button
                        currentSelection = -1;
                        proposalList.empty();
                        input.val('');
                        break;
                }
            });
            //keyup事件最后发生，一次键盘敲入事件彻底完成。
            input.bind("keyup", function (e) {
                if (e.which != 13 && e.which != 27
                    && e.which != 38 && e.which != 40) {
                    currentProposals = [];
                    currentSelection = -1;
                    proposalList.empty();
                    if (input.val() != '') {
                        var word = "^" + input.val() + ".*";
                        proposalList.empty();
                        for (var test in params.hints) {
                            if (params.hints[test].match(word)) {
                                currentProposals.push(params.hints[test]);
                                var element = $('<li></li>')
                                    .html(params.hints[test])
                                    .addClass('proposal')
                                    .click(function () {
                                        proposalList.empty();
                                        params.onSubmit(input.val());
                                        //定义一个变量用于区分发货人和收货人;
                                        $.ajax({
                                            url: "../../../../getDriverByDriverId",
                                            type: 'post',
                                            data: {
                                                'id': $(this).html().substring($(this).html().indexOf('号') + 1, $(this).html().length - 1)
                                            },
                                            async: false,
                                            success: function (data) {
                                                //司机姓名
                                               $('#textValue0').val(data.data.ownername)
                                                //设置默认选中
                                                //$("#substationUnit option[value='"+data.data.subId+"']").attr("selected", "selected");
                                                //运输路线一详细地址
                                                $('#detailedAddress').val(data.data.demo)
                                                //运输路线二详细地址
                                                $('#detailedAddress1').val(data.data.demos)
                                                //车辆位置
                                                $('#detailedAddress2').val(data.data.demoss)
                                                //车辆招牌
                                                $('#licenseTag').val(data.data.licensetag)
                                                //司机电话
                                                $('#phone').val(data.data.phone)
                                                //挂车拍照号
                                                $('#trailer').val(data.data.trailer)
                                                //车辆所有权
                                                $('#vehicleProperty').val(data.data.vehicleproperty)
                                                //车主身份证
                                                $('#identityCard').val(data.data.identitycard)
                                                //车主地址
                                                $('#ownerAddress').val(data.data.owneraddress)
                                                //最大载重单位吨
                                                $('#maximumLoad').val(data.data.maximumload)
                                                //评价备注
                                                $('#remark').val(data.data.remark)
                                                //分站
                                                $("#substationUnit option[value='"+data.data.subId+"']").attr("selected","selected");
                                               //车辆类型
                                                $("#vehicleType option[value='"+data.data.vehicleType+"']").attr("selected","selected");
                                                //刷新
                                                form.render("select");
                                            }
                                         })
                                    })
                                    .mouseenter(function () {
                                        $(this).addClass('selected');
                                    })
                                    .mouseleave(function () {
                                        $(this).removeClass('selected');
                                    });
                                proposalList.append(element);
                            }
                        }
                    }
                }
            });
            searchContainer.append(proposals);
            //手动渲染
            form.render();
            return this;
        };




        //监听提交
        form.on('submit(demo1)', function(data){
            $.ajax({
                url: "../../../../insertDriverTransportprotocol",
                type: "post",
                data: {
                    //发车时间
                    departuretime: $("#date").val(),
                    //分站
                    subId:$('#substationUnit option:selected').val(),
                    //运输路线1
                    trafficcircuitone:$('#detailedAddress').val(),
                    //运输路线2
                    trafficcircuittwo:$('#detailedAddress1').val(),
                    //车辆位置
                    location:$('#detailedAddress2').val(),
                    //车辆牌照
                    licensetag:$('#licenseTag').val(),
                    //司机手机
                    phone:$('#phone').val(),
                    //挂车拍照号
                    trailer:$('#trailer').val(),
                    //车辆所有权
                    vehicleproperty:$('#vehicleProperty').val(),
                    //车主姓名
                    textValue0:$('#textValue0').val(),
                    //车主身份证
                    identitycard:$('#identityCard').val(),
                    //车主地址
                    owneraddress:$('#ownerAddress').val(),
                    //最大载重单位吨
                    maximumload:$('#maximumLoad').val(),
                    //评价备注
                    remark:$('#remark').val(),
                    //车辆类型
                    vehicleType:$('#vehicleType option:selected').val()
                },
                dataType: "text",
                success: function (data) {

                }
            })

            layer.msg('协议新增成功,即将关闭...');
            setTimeout(function(){//设置定时器
                window.parent.location.reload();//刷新父页面
                //获取当前窗口名称
                //当你在iframe页面关闭自身时
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            },1000);
            return false;
        });
    })
</script>